<template>
	<view class="apply">
		<form @submit="submit">
			<view class="blocks">
				<view class="block_input">
					<view><text>*</text>客户姓名：</view>
					<input type="text" name="name" v-model="form.name" placeholder="请输入您的姓名"/>
					<view class="tip" v-show="tip.name">请输入您的姓名</view>
				</view>
				<view class="block_input">
					<view><text>*</text>门头名称：</view>
					<input type="text" name="title" v-model="form.title" placeholder="请输入门头名称"/>
					<view class="tip" v-show="tip.title">请输入门头名称</view>
				</view>
				<view class="block_input">
					<view><text>*</text>联系方式：</view>
					<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
					<view class="tip" v-show="tip.phone">请输入您的联系方式</view>
				</view>
				<view class="block_input">
					<view><text>*</text>申请地址：</view>
					<input :disabled="addressDisabled" type="text" name="address" v-model="form.address" placeholder="请输入地址"/>
					<u-icon @click="chooseAddress" style="z-index:90;position: absolute;right: 50rpx;margin-top: -60rpx;display: flex;justify-content: flex-end;" name="map-fill" color="#DCDCDC"></u-icon>
					<view class="tip" v-show="tip.address">请输入地址</view>
				</view>
				<view class="block_input">
					<view><text>*</text>膜类销售额：</view>
					<input type="number" name="workstationsNumber" v-model="form.workstationsNumber" placeholder="请输入膜类销售额"/>
					<view class="tip" v-show="tip.workstationsNumber">请正确填写膜类销售额</view>
				</view>
				<view class="block_input">
					<view><text>*</text>工位数量：</view>
					<input type="number" name="salesNumber" v-model="form.salesNumber" placeholder="请输入工位数量:"/>
					<view class="tip" v-show="tip.salesNumber">请正确填写工位数量</view>
				</view>
				<view class="block_input">
					<view class="bottom">
						<view class="showImg" @click="changeImg">
							<view v-if="imgSrc===''" style="color: rgba(0,0,0,0.26);display: flex;flex-direction: column;">
								<u-icon name="plus" size="60" top="20" style="margin-bottom: 20rpx;"></u-icon>
								<text style="color: rgba(0,0,0,0.26)">上传</text>
							</view>
							<img v-else style="width: 100%;height: 100%;" :src="imgSrc" alt="门店头图" />
						</view>
					</view>
				</view>
				<button class="submit" form-type="submit">提交</button>
			</view>
		</form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '../../common/config.service';
import store from '../../store';
	export default {
		data() {
			return {
				errorType: ['message'],
				labelPosition: 'top',
				border: false,
				addressDisabled:true, //申请地址一开始不能自己编辑，需要选择过经纬度后才可手动更改
				file:{}, //上传文件
				imgSrc:'', //文件上传图片
				header:{
					"X-Access-Token":store.state.vuex_token,
					"X-Requested-With":'XMLHttpRequest'
				},
				form: {
					name: '', //客户姓名
					title: '', //公司名称
					phone: '', //联系方式
					address: '', //申请地址
					latitude: 0, //纬度
					longitude: 0, //经度
					audit:0, //审核
					workstationsNumber: '', // 膜类销售额
					salesNumber: '', //工位数量
					logo: '', //门头照片
				},
				tip:{
					name:false,
					title:false,
					phone:false,
					address:false,
					salesNumber:false,
					workstationsNumber:false
				},
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					title: [{
						required: true,
						message: '请输入门头名称',
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: '请输入您的联系方式',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '联系方式不正确',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'change'
					}],
					workstationsNumber: [{
						required: true,
						message: '请输入膜类销售额',
						trigger: 'change'
					}],
					salesNumber: [{
						required: true,
						message: '请输入工位数量',
						trigger: 'change'
					}]
				},
			}
		},
		methods: {
			chooseAddress(){
				let that = this;
				uni.chooseLocation({
					success: function (res) {
						const { address,latitude,longitude } = res;
						that.form.address = address;
						that.form.latitude = latitude;
						that.form.longitude = longitude;
						if(that.addressDisabled)that.addressDisabled = false;
					}
				});
			},
			// 提交申请
			async submit(){
				const { name,title,phone,address,workstationsNumber,salesNumber } = this.form;
				this.tip = {
					name:name==='',
					title:title==='',
					phone:(phone==='')||(!(/^1[345789]\d{9}$/.test(phone))),
					address:address==='',
					salesNumber:(salesNumber==='')||(!(/^(0|[1-9][0-9]*)$/.test(salesNumber))),
					workstationsNumber:(workstationsNumber==='')||(!(/^(0|[1-9][0-9]*)$/.test(workstationsNumber)))
				}
				if(name===''||title===''||phone===''||address===''||salesNumber===''||workstationsNumber===''){
					this.$refs.uToast.show({type:'warning',title: "请完善内容!"});
					return;
				}else if(!(/^1[345789]\d{9}$/.test(phone))){
					this.$refs.uToast.show({type:'warning',title: "联系方式格式不正确!"});
					return;
				}else if(!(/^(0|[1-9][0-9]*)$/.test(salesNumber))){
					this.$refs.uToast.show({type:'warning',title: "工位数量格式错误!"});
					return;
				}else if(!(/^(0|[1-9][0-9]*)$/.test(workstationsNumber))){
					this.$refs.uToast.show({type:'warning',title: "销售额格式错误!"});
					return;
				}
				
				if(this.file=={})this.realSubmit();
				else await this.uploadImage();
			},
			// 真正调用上传方法，否则有异步问题
			async realSubmit(){
				let result = await this.$api.applyShop(this.form);
				if(!result?.success) {
					this.$refs.uToast.show({type:'error',title: "申请失败!"});
				}else{
					this.$refs.uToast.show({type:'success',title: "授权店申请成功，等待管理员审核!"});
					this.clear();
				}
			},
			// 上传图片
			async uploadImage() {
			    let that = this;
			    await uni.uploadFile({
			      url: configService.crmUrl+'/sys/common/upload',
			      filePath: that.imgSrc, 
			      name: 'file',
			      header:{'X-Requested-With':'XMLHttpRequest',
				  'X-Access-Token':store.state.phone_login_token,
				  'x-requested-with':'xmlhttprequest'},
			      formData:{'biz':"temp"},
			      success: async(res) => {
			        if(res.statusCode == 200){
			          that.form.logo = await JSON.parse(res.data).message;
					  that.realSubmit();
			        } else {
			          that.$refs.uToast.show({type:'error',title: "图片上传失败，请重试!"});
			        }
			      },
			      fail: function (res) {
			        that.$refs.uToast.show({type:'error',title: "图片上传失败，请重试!"});
			      }
			    })
			  },
			// 切换图片
			changeImg(){
				let that = this;
				uni.chooseMedia({
				    count: 1,
				    mediaType: ['image'],
				    sourceType: ['album', 'camera'],
				    camera: 'back',
				    success(res) {
						if(res.tempFiles[0].fileType!=='image'){
							this.$refs.uToast.show({type:'warning',title: "图片上传格式错误!"});
							return;
						}
				        that.file = res.tempFiles[0];
						that.imgSrc = res.tempFiles[0].tempFilePath;
				    }
				})
			},
			// 清空
			clear(){
				this.addressDisabled=true; //申请地址一开始不能自己编辑，需要选择过经纬度后才可手动更改
				this.file={}; //上传文件
				this.imgSrc=''; //文件上传图片
				this.form= {
					name: '', //客户姓名
					title: '', //门头名称
					phone: '', //联系方式
					address: '', //申请地址
					latitude: 0, //纬度
					longitude: 0, //经度
					audit:0, //审核
					workstationsNumber: '', // 膜类销售额
					salesNumber: '', //工位数量
					logo: '', //门头照片
				};
				this.tip={
					name:false,
					title:false,
					phone:false,
					address:false,
					salesNumber:false,
					workstationsNumber:false
				};
			}
		}
	}
</script>
<style>
	page{
		background: #FFFFFF;
	}
</style>
<style scoped lang="scss">
.apply{
	padding-left: 32rpx;
	padding-right: 32rpx;
}
.showImg{
	width: 328rpx;
	height: 252rpx;
	color: #c7c7c7;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx solid #DEDEDE;
	background-color: #f7f8fa;
	border-radius: 8rpx;
	&:active{
		color: #ebebeb;
		background-color: #fcfdff;
	}
}
.bottom{
	display: flex;
	width: 100%;
	flex-direction: column;
}
.blocks{
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 60rpx;
	.block_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.block_input{
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-bottom: 32rpx;
		.tip{
			color: #FE020E;
			margin-top: 4rpx;
			font-size: small;
		}
		view{
			font-family: PingFang SC, PingFang SC;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 16rpx;
			text{
				vertical-align: middle;
				color: #FE020E;
				font-weight: bold;
				margin-right: 8rpx;
			}
		}
		input{
			height: 92rpx;
			background: #F8F9FB;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			color: rgba(0,0,0,0.8);
			padding:0 32rpx;
			font-size: 32rpx;
		}
		.checkbox_group{
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
	}
}
.submit{
	width: 100%;
	background-color: #FBCB11;
	height: 80rpx;
	font-size: 28rpx;
	color: #020202;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	margin-top: 40rpx;
	margin-bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	&::after{
		display: none;
	}
}
</style>
